<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索用户和添加用户 -->
        <el-button type="success" plain @click="showAddRolesDialog">添加角色</el-button>
        <!-- 表格 -->
        <template>
            <el-table :data="roleList" style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <el-row v-for="first in scope.row.children" :key="first.id">
                            <el-col :span="4">
                                <el-tag closable type="success">
                                    {{first.authName}}
                                </el-tag>
                            </el-col>
                            <el-col :span="20">
                                <el-row v-for="sec in first.children" :key="sec.id">
                                    <el-col :span="4">
                                        <el-tag closable type="success">
                                            {{sec.authName}}
                                        </el-tag>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-tag v-for="third in sec.children" :key="third.id" closable type="warning" @close="deleteRoleTag(scope.row,third.id)">
                                            {{third.authName}}
                                        </el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                        <el-row v-if="scope.row.children.length==0">
                            <el-col>该角色没有任何权限,请前往添加</el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column label="角色名称" prop="roleName">
                </el-table-column>
                <el-table-column label="描述" prop="roleDesc">
                </el-table-column>
                <el-table-column label="操作" prop="desc">
                    <template slot-scope="scope">
                        <el-tooltip content="编辑" placement="top">
                            <el-button type="success " icon="el-icon-edit" plain></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button type="danger " icon="el-icon-edit" plain></el-button>
                        </el-tooltip>
                        <el-tooltip content="分配权限" placement="top">
                            <el-button type="primary" icon="el-icon-edit" plain @click="showGrantDialog(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!-- 分配权限对话框 -->

        <el-dialog title="角色授权" :visible.sync="grantdialogVisible" width="30%">
            <div style="height:300px;overflow:auto">
                <el-tree ref="tree" :data="rightList" show-checkbox node-key="id" :default-expand-all='true' :default-expanded-keys="[2, 3]" :default-checked-keys="checkArr" :props="defaultProps">
                </el-tree>
            </div>

            <div style="margin-left:250px">
                <el-button @click="grantdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="grantRightSubmit">确 定</el-button>
            </div>

        </el-dialog>
        <!-- 添加角色对话框 -->
        <el-dialog title="角色授权" :visible.sync="addrolesdialogVisible" width="50%">
            <el-form :model="RolesruleForm" :rules="rules" ref="RolesruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="RolesruleForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="RolesruleForm.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <div style="margin-left:520px">

                <el-button @click="addrolesdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addRolesSumit">确 定</el-button>
            </div>

        </el-dialog>

    </div>

</template>

<script>
import {
  rolesListApi,
  deleteRoleIdAndRightIdApi,
  rightsListApi,
  grantRolesAndRidsApi,
  addRolesApi
} from "@/api/index.js";

export default {
  data() {
    return {
      RolesruleForm: {
        roleName: "",
        roleDesc: ""
      },
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" }
        ],
        roleDesc: [{}]
      },
      roleId: "",
      checkArr: [],
      rightList: [],
      roleList: [],
      addrolesdialogVisible: false,
      grantdialogVisible: false,
      addRolesdialogVisible: false,
      defaultProps: {
        children: "children",
        label: "authName"
      }
    };
  },

  methods: {
    //   添加角色
    showAddRolesDialog() {
      this.addrolesdialogVisible = true;
    },
    addRolesSumit() {
      addRolesApi({
        roleName: this.RolesruleForm.roleName,
        roleDesc: this.RolesruleForm.roleDesc
      }).then(res => {
        console.log(res);
        if (res.meta.status == 201) {
          this.$message({
            message: res.meta.msg,
            type: "success"
          });
          this.addrolesdialogVisible = false;
        } else {
          this.$message({
            message: res.meta.msg,
            type: "error"
          });
        }
      });
    },
    //   1.4.6角色授权
    grantRightSubmit() {
      console.log(this.$refs.tree.getCheckedNodes());
      //  存数组
      var nodeArr = this.$refs.tree.getCheckedNodes();
      // 要拿到里面的值,一直循环
      var idArr = nodeArr.map(value => {
        return value.id + "," + value.pid;
      });
      var strArr = idArr.join(",");
      // console.log(strArr)
      var ArrNum = strArr.split(",");
      // console.log(ArrNum)
      //    console.log(typeof ArrNum)
      //    给数组去重复
      var newArr = Array.from(new Set(ArrNum));
      var rids = newArr.join(",");
      console.log(rids);
      grantRolesAndRidsApi({ roleId: this.roleId, rids: rids }).then(res => {
        console.log(res);
        if (res.meta.status == 200) {
          this.$message({
            message: res.meta.msg,
            type: "success"
          });
          this.grantdialogVisible = false;
        } else {
          this.$message({
            message: res.meta.msg,
            type: "error"
          });
        }
      });
    },
    // 点击显示角色授权对话框
    showGrantDialog(row) {
      rightsListApi("tree").then(res => {
        // console.log(res)
        this.rightList = res.data;
        this.roleId = row.id;
      });
      this.grantdialogVisible = true;
      console.log(row);
      this.checkArr.length = 0;
      if (row.children.length > 0) {
        row.children.forEach(first => {
          if (first.children.length > 0) {
            first.children.forEach(second => {
              if (second.children.length > 0) {
                second.children.forEach(third => {
                  this.checkArr.push(third.id);
                });
              }
            });
          }
        });
      }
    },
    init() {
      rolesListApi().then(res => {
        console.log(res);
        this.roleList = res.data;
      });
    },
    deleteRoleTag(row, rightid) {
      console.log(row.id);
      console.log(rightid);
      console.log(row.children);
      deleteRoleIdAndRightIdApi(row.id, rightid).then(res => {
        console.log(res);
        if (res.meta.status == 200) {
          this.$message({
            message: res.meta.msg,
            type: "success"
          });
          row.children = res.data;
        } else {
          this.$message({
            message: res.meta.msg,
            type: "error"
          });
        }
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.el-breadcrumb {
  background-color: #f5f5f5;
  height: 45px;
  font-size: 15px;
  padding-left: 10px;
  line-height: 45px;
  margin-bottom: 15px;
}
</style>